<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>投屏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style></style>
  </head>
  <body
    class="flex flex-col items-center content-center h-[100vh] justify-center"
  >
    <div class="flex gap-4">
      <div
        class="relative border-blue-500 mb-4 border-dashed border-2 w-[680px] h-[520px] flex justify-center items-center"
      >
        <video id="videoElement" width="640" muted autoplay loop></video>
      </div>
      <div class="bg-[#ccc] w-60 h-[520px] flex flex-col gap-4 items-center">
        <img id="img1" src="" alt="" />
        <img id="img2" src="" alt="" />
      </div>
    </div>
    <div>
      <button class="bg-blue-500 text-white py-1 px-2 rounded" id="toupin">
        投屏
      </button>
      <button class="bg-blue-500 text-white py-1 px-2 rounded" id="jiepin">
        截屏
      </button>
      <button class="bg-blue-500 text-white py-1 px-2 rounded" id="toupinclose">
        关闭视频流
      </button>
    </div>
    <canvas id="canvasElement"></canvas>
    <script src="./index.js"></script>
  </body>
</html>
